<template>
  <div class="visitor-alreadyVisited">
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">所属行业:</div>
        <div class="input-item">
          <el-cascader
            clearable
            placeholder="请选择所属行业"
            class="cascader tradeCascader"
            v-model="industryCas"
            :show-all-levels="false"
            :options="industryListTree"
            :props="{ label: 'informationName', value: 'id' }"
            @change="handleCasChange"
          ></el-cascader>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">单位名称:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.companyName" placeholder="请输入单位名称" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">通过时间:</div>
        <div class="time-item">
          <start-end-time
            :times="times"
            :showTime="{ format: 'HH:mm:ss' }"
            format="YYYY-MM-DD HH:mm:ss"
            @timeChange="timeChange"
            :resetTime="resetTime"
          ></start-end-time>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">负责人:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.legalPersonName" placeholder="请输入负责人姓名" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">负责人身份证号:</div>
        <div class="input-item">
          <a-input :maxLength="18" v-model="queryParam.legalIdCard" placeholder="请输入负责人身份证号" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">手机号码:</div>
        <div class="input-item">
          <a-input :maxLength="18" v-model="queryParam.legalMobile" placeholder="请输入安全负责人手机号码" />
        </div>
      </div>

      <div class="btn-wrap">
        <a-button class="searchBtn" @click="searchQuery(queryParam.startTime, queryParam.endTime)" type="primary">
          搜索
        </a-button>
        <a-button class="resetBtn" @click="resetHandle()" type="primary"> 重置 </a-button>
      </div>
    </div>

    <div>
      <a-table
        rowKey="companyMessageId"
        class="tableList"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
      >
        <template v-slot:action="records">
          <span class="operation deatil-color" v-has="'bank:detail'" @click="detailHandle(records)">详情 </span>
          <span class="operation warnColor" v-has="'bank:delete'" @click="exitManagement(records)">退出纳管 </span>
        </template>
      </a-table>
    </div>
    <allMessage
      ref="allMessage"
      :publicVisible="publicVisible"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
    <exit-manage ref="exitManage" @success="searchQuery"></exit-manage>
  </div>
</template>
<script>
import moment from 'moment'
import allMessage from '@/components/allMessage'
import startEndTime from '@/components/startEndTime'
import { Cascader } from 'element-ui'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { companyDelete } from '@/api/company'
import { comMethods } from '@/mixins/comMethods'
import { informationPage } from '@/api/industry'
import { mapState } from 'vuex'
import exitManage from './modules/alreadyAudit/exitManage'
export default {
  name: 'visitor-alreadyVisited',
  components: { startEndTime, allMessage, exitManage, 'el-cascader': Cascader },
  mixins: [JeecgListMixin, comMethods],
  computed: {
    ...mapState({
      isPoliceAgencyId: (state) => state.user.isPoliceAgencyId,
    }),
  },
  watch: {
    isPoliceAgencyId: {
      handler(v) {
        this.queryParam.policeAgencyId = v.id ? v.id : ''
        this.searchQuery()
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      url: {
        list: '/company/message/audit_page?companyStatus=2',
        tree: true,
      },
      publicVisible: false,
      disableMixinCreated: true,
      industryCas: [],
      industryListTree: [],
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '所属派出所',
          dataIndex: 'policeAgencyId_dictText',
          ellipsis: true,
          align: 'center',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '单位名称',
          dataIndex: 'companyName',
          ellipsis: true,
          align: 'center',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '所属行业',
          dataIndex: 'industryInformationId_dictText',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '安全负责人',
          dataIndex: 'legalPersonName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '联系电话',
          dataIndex: 'legalMobile',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '负责人身份证号',
          dataIndex: 'legalIdCard',
          ellipsis: true,
          align: 'center',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '审核人员',
          dataIndex: 'auditUserName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '通过时间',
          dataIndex: 'auditTime',
          width: 180,
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
        },
      ],
    }
  },
  mounted() {
    this.industryCas = []
    this.getDictCas()
  },
  methods: {
    async getDictCas() {
      let { result } = await informationPage()
      this.industryListTree = this.deleteChildren(result)
    },
    deleteChildren(arr) {
      let childs = arr
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].children) {
          if (childs[i].children.length) {
            this.deleteChildren(childs[i].children)
          } else {
            delete childs[i].children
          }
        }
      }
      return arr
    },
    handleCasChange(e) {
      this.queryParam.industryInformationId = e.slice(-1).toString()
    },
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.startTime = null
        this.queryParam.endTime = null
      }
    },
    // searchReset() {
    //   this.queryParam = {}
    //   this.resetTime = true
    //   this.loadData(1)
    // },
    resetHandle() {
      this.resetTime = true
      this.industryCas = []
      this.queryParam.industryInformationId = ''
      this.searchReset()
    },
    detailHandle(records) {
      // this.$refs.detailModal.show(records, 'alreadyAudit')
      this.$router.push({
        path: '/company/auditRecord/modules/alreadyAudit/detailModal',
        query: {
          companyMessageId: records.companyMessageId,
          companyChangeRecordId: records.companyChangeRecordId,
        },
      })
    },

    exitManagement(records) {
      let params = {
        id: records.companyMessageId,
        companyStatus: 4,
      }
      this.$refs.exitManage.show(params)
    },

    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },
    tipMessage(records) {
      companyDelete({ id: records.companyMessageId }).then((res) => {
        this.$message.success(res.message)
        this.publicVisible = false
        this.searchQuery()
      })
    },
  },
}
</script>
